import React from 'react';
import { Card, Row, Col, Typography, Space, Divider } from 'antd';
import {
  TeamOutlined,
  ApiOutlined,
  MonitorOutlined,
  SecurityScanOutlined,
} from '@ant-design/icons';
import { useSelector } from 'react-redux';
import './style.scss';

const { Title, Paragraph, Text } = Typography;

const Home = () => {
  const { userInfo } = useSelector(state => state.user);

  const features = [
    {
      title: '用户管理系统',
      icon: <TeamOutlined style={{ fontSize: '24px' }}/>,
      description: '提供完整的用户管理功能，包括用户认证、权限控制、个人信息管理等。支持多角色分配，确保系统安全性。'
    },
    {
      title: '网络拓扑构建',
      icon: <ApiOutlined style={{ fontSize: '24px' }}/>,
      description: '支持自定义网络拓扑结构，可通过文件上传或使用默认配置构建网络环境。提供可视化的网络拓扑图展示。'
    },
    {
      title: '网络监控系统',
      icon: <MonitorOutlined style={{ fontSize: '24px' }}/>,
      description: '实时监控网络状态，包括攻击者数量、服务器数量统计，以及服务器流量的实时监控和数据可视化展示。'
    },
    {
      title: '攻击仿真模块',
      icon: <SecurityScanOutlined style={{ fontSize: '24px' }}/>,
      description: '提供攻击仿真环境，支持自定义攻击目标和攻击类型，可进行网络攻击模拟并观察网络响应。'
    }
  ];

  return (
    <div className="home-page">
      <Card className="welcome-card">
        <Title level={2}>网络攻击仿真系统</Title>
        <Paragraph>
          欢迎使用网络攻击仿真系统，{userInfo?.username}。本系统基于容器技术实现网络攻击仿真环境，
          用于仿真真实网络环境中的网络攻击，以方便研究网络攻击方式以及防御策略。
        </Paragraph>
        <Divider />

        <Title level={3}>系统功能</Title>
        <Row gutter={[24, 24]}>
          {features.map((feature, index) => (
            <Col span={12} key={index}>
              <Card className="feature-card">
                <Space align="start">
                  {feature.icon}
                  <div>
                    <Title level={4}>{feature.title}</Title>
                    <Paragraph>{feature.description}</Paragraph>
                  </div>
                </Space>
              </Card>
            </Col>
          ))}
        </Row>

        <Divider />

        <Title level={3}>关于系统</Title>
        <Card className="about-card">
          <Paragraph>
            本系统是一个基于 React 和 Spring Boot 开发的现代化网络攻击仿真平台。
            采用前后端分离架构，提供直观的用户界面和强大的后端支持。
          </Paragraph>
          <Paragraph>
            <Text strong>技术栈：</Text>
            <ul>
              <li>前端：React、Redux、Ant Design、ECharts</li>
              <li>后端：Spring Boot、MySQL、Redis</li>
              <li>网络仿真：docker、自定义网络协议栈、流量监控模块</li>
            </ul>
          </Paragraph>
          <Paragraph>
            <Text strong>创作团队：</Text>
            <ul>
              <li>指导教师：李昊</li>
              <li>开发人员：wyx</li>
              <li>所属单位：西安交通大学</li>
              <li>交流邮箱：654685119@qq.com</li>
            </ul>
          </Paragraph>
        </Card>
      </Card>
    </div>
  );
};

export default Home;
